<template>
  <div class="p-6 space-y-4">
    <h1 class="text-3xl font-bold text-gray-900">Toast 系统测试</h1>
    
    <div class="grid grid-cols-2 gap-4">
      <UiButton @click="showSuccess" variant="primary">
        成功消息
      </UiButton>
      
      <UiButton @click="showError" variant="danger">
        错误消息
      </UiButton>
      
      <UiButton @click="showWarning" variant="secondary">
        警告消息
      </UiButton>
      
      <UiButton @click="showInfo" variant="outline">
        信息消息
      </UiButton>
      
      <UiButton @click="showWithDescription" variant="ghost">
        带描述的消息
      </UiButton>
      
      <UiButton @click="showPersistent" variant="ai">
        持久化消息
      </UiButton>
      
      <UiButton @click="clearAll" variant="fictional">
        清除所有
      </UiButton>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useUiStore } from '../store/useUiStore'
import { UiButton } from '../components/ui'

const uiStore = useUiStore()

const showSuccess = () => {
  uiStore.showSuccess('操作成功完成！')
}

const showError = () => {
  uiStore.showError('操作失败，请重试！')
}

const showWarning = () => {
  uiStore.showWarning('请注意，这是一个警告消息！')
}

const showInfo = () => {
  uiStore.showInfo('这是一条信息提示！')
}

const showWithDescription = () => {
  uiStore.addToast('文件上传完成', {
    type: 'success',
    description: '已成功上传 3 个文件，总计 2.5MB',
    duration: 4000
  })
}

const showPersistent = () => {
  uiStore.addToast('重要通知', {
    type: 'warning',
    description: '此消息不会自动关闭，需要手动关闭',
    duration: 0,
    closable: true
  })
}

const clearAll = () => {
  uiStore.clearToasts()
}
</script>
